<template>
  <div class="app_content_container">
    <Breadcrumb :items="['宿主机']" />
    <BaseTable
      ref="baseTableRef"
      :isShowAddBtn="false"
      :showSetColumn="false"
      :showDownload="false"
      isScroll
      :apiUrl="getHostList"
      placeholder="请输入宿主机名称"
      :columns="columns"
      @handleSubColumnSetting="handleSubColumnSetting"
      @handleEditOrAdd="$refs.addOrEditRef.open(record)"
    >
      <template #enabled="{ record }">
        <ga-switch
          :checked-value="1"
          :unchecked-value="0"
          size="mini"
          v-model="record.enabled"
          @change="handleEnabledChange(record)"
        />
      </template>
    </BaseTable>
    <addOrEdit ref="addOrEditRef" @fetchData="$refs.baseTableRef.fetchData()" />
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue";
import { getHostList } from "@/api/hostMgt";
import { columns } from "./columns";
const baseTableRef = ref(null);
onMounted(() => {});
</script>
